<template>
	<view class="home">
		<image class="app_bg" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/yys/bj.png" />
		<view class="home_con">
			<view class="home_title home_first_title">
				<image src="../../static/home/home_title_bgxj.png" />
			</view>
			<view class="home_box bzxj_box" @click="toPages('/pages/eightCharacterExplan/index', 13)">
				<view class="bzxj_left">
					<view class="bzxj_text">事业  你的工作...</view>
					<view class="bzxj_text">财富  你的财运...</view>
					<view class="bzxj_text">爱情  如果你处...</view>
					<view class="bzxj_text">健康  需要注意...</view>
					<view class="bzxj_btn">立即测算 >></view>
				</view>
				<view class="bzxj_right">
					<image src="../../static/home/bg_icon.png"></image>
				</view>
			</view>
			<view class="home_title">
				<image src="../../static/home/home_title_rmgn.png" />
			</view>
			<view class="home_box rmgn_box">
				<view class="rmgn_con" @click="toPages('/pages/ziweiDoushu/index', 15)">
					<image class="rmgn_icon rmgn_icon1" src="../../static/home/zz_icon.png" />
					<image class="rmgn_bg" src="../../static/home/rmgn_item_bg.png" />
					<view class="rmgn_text">
						<view class="rmgn_text1">紫微斗数</view>
						<view class="rmgn_text2">揭示命运走势</view>
					</view>
					<view class="rmgn_btn">
						立即测算
						<image src="../../static/home/rmgn_item_btn.png" />
					</view>
				</view>
				<view class="rmgn_con" @click="toPages('/pages/eightCharacterMarriage/index', 14)">
					<image class="rmgn_icon rmgn_icon1" src="../../static/home/wj_icon.png" />
					<image class="rmgn_bg" src="../../static/home/rmgn_item_bg.png" />
					<view class="rmgn_text">
						<view class="rmgn_text1">八字合婚</view>
						<view class="rmgn_text2">探索二人姻缘</view>
					</view>
					<view class="rmgn_btn">
						立即测算
						<image src="../../static/home/rmgn_item_btn.png" />
					</view>
				</view>
				<view class="rmgn_con" @click="toPages('/pages/lifelongMarriage/index', 16)">
					<image class="rmgn_icon rmgn_icon1" src="../../static/home/fj_icon.png" />
					<image class="rmgn_bg" src="../../static/home/rmgn_item_bg.png" />
					<view class="rmgn_text">
						<view class="rmgn_text1">算姻缘</view>
						<view class="rmgn_text2">预测个人情感走势</view>
					</view>
					<view class="rmgn_btn">
						立即测算
						<image src="../../static/home/rmgn_item_btn.png" />
					</view>
				</view>
				<view class="rmgn_con" @click="toPages('/pages/giveName/index', 17)">
					<image class="rmgn_icon rmgn_icon1" src="../../static/home/mb_icon.png" />
					<image class="rmgn_bg" src="../../static/home/rmgn_item_bg.png" />
					<view class="rmgn_text">
						<view class="rmgn_text1">起名字</view>
						<view class="rmgn_text2">命理辅助取名</view>
					</view>
					<view class="rmgn_btn">
						立即测算
						<image src="../../static/home/rmgn_item_btn.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="calculation_btn" @click="toPages('/pages/share/share')">
			<image class="calculation_icon" src="../../static/home/flex_icon.png" />
		</view>
	</view>
</template>

<script setup>
import request from '../../common/js/request'
import { ref } from 'vue'
import { checkLogin } from '../../common/js/method'

import { onLoad } from '@dcloudio/uni-app';
const popup = ref(null);

let packageList = ref([]);

onLoad(async (params) => {
	// 分享者id
	if (params.id) {
		uni.setStorageSync('shareUserId', params.id);
	}
	// 先登录
	checkLogin();
	// 获取当前分类的数据
	getSelectList();
});

const getSelectList = function () {
	let url = '/api/busi/package/select/by-applyid'
	request(url).then((res)=>{
		if(res.status == 200) {
			packageList.value = res.data;
		}
	});
}

const toPages = function (path, type) {
	if(type) {
		let packageData = packageList.value.find(item => item.type == type);
		uni.navigateTo({
			url: path + '?packageData=' + JSON.stringify(packageData)
		});
	}else {
		uni.navigateTo({
			url: path 
		});
	}
}
</script>

<style lang="less" scoped>
.home {
	padding: 30rpx;
	.home_con {
		z-index: 1;
	}
	.home_title {
		margin: 24rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 312rpx;
			height: 70rpx;
		}
	}
	.home_first_title {
		margin: 0 0 24rpx;
	}
	.bzxj_box {
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 8rpx  rgba(0, 0, 0, 0.25);
		background: rgba(255, 255, 255, 1);
		padding: 24rpx 32rpx 24rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.bzxj_left {
			width: calc(100% - 380rpx);
			.bzxj_text {
				font-size: 26rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 40rpx;
				margin-bottom: 20rpx;
				color: rgba(117, 72, 59, 1);
				text-align: left;
			}
			.bzxj_btn {
				margin-top: 30rpx;
				border-radius: 200rpx;
				background: rgba(117, 72, 59, 1);
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				padding: 10rpx 32rpx 10rpx 32rpx;
				font-size: 30rpx;
				font-weight: 700;
				letter-spacing: 0;
				line-height: 46rpx;
				color: rgba(255, 255, 255, 1);
				text-align: left;
			}
		}
		.bzxj_right {
			width: 360rpx;
			image {
				width: 100%;
				height: 360rpx;
			}
		}
	}
	.rmgn_box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
	}
	.rmgn_con {
		position: relative;
		overflow: hidden;
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 8rpx  rgba(0, 0, 0, 0.25);
		background: rgba(255, 255, 255, 1);
		padding: 32rpx;
		box-sizing: border-box;
		.rmgn_bg {
			position: absolute;
			bottom: 0;
			right: -30rpx;
			width: 148rpx;
			height: 148rpx;
		}
		.rmgn_icon {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}
		.rmgn_text {
			margin-bottom: 40rpx;
			.rmgn_text1 {
				font-size: 32rpx;
				font-weight: 700;
				letter-spacing: 0;
				// line-height: 46rpx;
				color: rgba(117, 72, 59, 1);
				text-align: left;
				margin-bottom: 8rpx;
			}
			.rmgn_text2 {
				font-size: 22rpx;
				font-weight: 400;
				letter-spacing: 0;
				// line-height: 32rpx;
				color: rgba(117, 72, 59, 1);
				text-align: left;
			}
		}
		.rmgn_btn {
			display: inline-block;
			border-radius: 200rpx;
			background: rgba(117, 72, 59, 1);
			padding: 12rpx 26rpx 12rpx 26rpx;
			font-size: 28rpx;
			font-weight: 700;
			letter-spacing: 0;
			line-height: 35rpx;
			color: rgba(255, 255, 255, 1);
			text-align: left;
			&>image {
				margin-left: 12rpx;
				width: 16rpx;
				height: 14rpx;
			}
		}
	}
	.rmgn_icon1 {
		width: 80rpx;
		height: 84rpx;
	}
	.calculation_btn {
		position: fixed;
		bottom: 70rpx;
		right: 30rpx;
		.calculation_icon {
			width: 128rpx;
			height: 168rpx;
		}
	}
}
</style>